<template>
  <div>
    <van-cell-group>
      <van-field
        v-model="name"
        required
        clearable
        label="候选人姓名"
        placeholder="请输入候选人姓名"
      />
      <van-cell
        disabled
        title="单位"
        style="width: 20%; float: left;"
      />
      <van-picker
        :columns="college_name"
        @change="onChange"
        style="width: 80%; float: right;"
      />
      <div style="clear: both; height: 0;"></div>
      <van-field
        v-model="profile"
        required
        clearable
        autosize
        type="textarea"
        rows="1"
        label="个人事迹"
        placeholder="请输入个人事迹"
      />
      <van-cell
        disabled
        title="照片"
        style="width: 20%; float: left;"
      />
      <form enctype="multipart/form-data" method="post" id="formCandid" target="nm_iframe">
        <input type="file" name="image" accept="image/*" ref="file" multiple="multiple" id="image"/>
      </form>
      <iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>
      <van-icon name="photograph" style="margin: 14px 0;" @click="clickUpload"/>
      <van-button size="large" style="float: right;" @click="submitInfo">提交</van-button>
      <div style="clear: both; height: 0;"></div>
    </van-cell-group>
  </div>
</template>

<script>
  import {Field, Cell, CellGroup, Stepper, Button, Icon, Picker, Toast} from 'vant';

  export default {
    name: "Candidates",
    components: {
      [Field.name]: Field,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Stepper.name]: Stepper,
      [Button.name]: Button,
      [Icon.name]: Icon,
      [Picker.name]: Picker,
      [Toast.name]: Toast,
    },
    data() {
      return {
        college_id: [],
        college_name: [],
        name: "",
        college: 0,
        profile: "",
      }
    },
    methods: {
      getCollege() {
        let _this = this;
        let token = _this.getCookie("token");
        _this.$http.get(_this.apiUrl("user/selection/getCollege"), {
          headers: {
            'token': token,
            'sid': _this.$route.query.sid
          }
        }).then((res) => {
          // console.log(res.data);
          let college_list = res.data.data;
          for (let i = 0; i < college_list.length; i++) {
            _this.college_id.push(college_list[i].id);
            _this.college_name.push(college_list[i].name);
          }
        });
      },
      submitInfo() {
        let _this = this;
        let token = _this.getCookie("token");
        $("#formCandid").ajaxSubmit({
          url: _this.apiUrl("user/selection/addCandidate"),
          type: 'POST',
          cache: false,
          data: {
            'name': _this.name,
            'college': _this.college + 1,
            'profile': _this.profile,
          },
          headers: {
            'token': token,
            'sid': _this.$route.query.sid,
          },
          dataType: "json",
          processData: false,
          contentType: false,
          success: (res) => {
            // console.log(res);
            if (res.statusCode === 200) {
              Toast.success('添加成功');
              _this.name = "";
              _this.college = 0;
              _this.profile = "";
              _this.audioPlay();
            }
          },
          error: function (error) {
            Toast.fail('添加失败');
          }
        });
      },
      onChange(picker, value, index) {
        let _this = this;
        _this.college = index;
      },
      clickUpload() {
        $("#image").click();
      },
      audioPlay() {
        let _this = this;
        let RandomStr = _this.randomWord(true, 10, 20);
        _this.$emit('CandidStatus', RandomStr);
      },
    },
    mounted() {
      let _this = this;
      _this.getCollege();
    },
  }
</script>

<style scoped>
  #image {
    display: none;
  }
</style>
